<template>
  <div>
    <Button type="primary" :loading="api.loading.value" @click="request">每次点击都将发起一次请求，且上一次请求未返回则取消上次请求，重新发起请求</Button>
    <br/>
    <br/>
    <Button type="primary" @click="cancel">中断请求</Button>
    <br/>
    <br/>
    <Button type="primary" @click="clear">清除缓存</Button>

    请求并发

  </div>
</template>
<script setup lang="ts">
import {Button} from "ant-design-vue"
import useRequest from "@/hooks/useRequest";
import fetchApi from "@/api/user"

const api = useRequest<APIUSER.DeptList[],{depy_id:number}>(fetchApi.deptList)

const request = async ()=>{
  // console.log(api.service({}));
  const ed = await api.service({depy_id:1})
  // console.log("结果",ed);
  alert(ed)
}

const cancel = ()=>{
  console.log(api.cancel);
  api.cancel()
}

const clear = ()=>{
  api.clearCache()
}
</script>
<style lang="less" scoped>
</style>